﻿<!DOCTYPE html>
<html>
<head>
    <title>表单制作</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_533449_a7yfipp8wb.css">
    <link href="/ViewV5/CSS/bootstrap3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/animate.css">
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/index.css?v=1">
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/default.css">
    <link rel="stylesheet" href="/ViewV5/JS/element/index.css?v=2.13">

    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/FORMBI.css?v=9">
    <style>
        .tools .el-card {
            margin: 5px 5px;
            border-radius: 0px;
        }

        .tools .el-card__body {
            padding: 10px 0;
            text-align: left;
            padding-left: 5px;
        }

        .filed {
            height: 400px;
            overflow: auto;
        }

            .filed .el-card__body {
                padding: 5PX;
            }

        .bbsx .el-form-item {
            max-height: 75PX;
        }

        .el-dialog__header {
            background-color: #12b8f6 !important;
            color: #fff !important;
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .el-dialog__title, .el-dialog__close {
            color: #fff !important;
        }

        .el-dialog__headerbtn {
            top: 15px;
        }

        .el-dialog__body {
            padding: 20px 20px;
        }

        .widgetdel {
            margin-right: 10px;
        }
    </style>
</head>
<body style="background-color: #e7ecf1;font-size:12px">
    <!--<script>
        if (!window.Promise) {
            document.write('<script src="//cdn.jsdelivr.net/npm/es6-promise@4.1.1/dist/es6-promise.min.js"><\/script><script>ES6Promise.polyfill()<\/script>')
        }
    </script>-->
    <div id="Loading">
        <div class="loader-inner ball-beat">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div id="DATABI_YBZZ" class="FormB" style="display:none">
        <nav class="navbar navbar-inverse box-shadow" style="border-radius: 0; background-color: #fff; border-color: #fff; ">
            <div class="head-center clearfix c2">
                <div class="logo c666 pull-left" v-text="FormName">
                </div>
                <div class="pull-right top-fun">
                    <ul class="clearfix">
                        <li v-on:click="saveybdata">
                            <a class="shuaxin">
                                <i class="iconfont icon-shangchuan tip" data-toggle="tooltip" title="保存" data-placement="bottom"></i> 保存
                            </a>
                        </li>
                        <li>
                            <a :href="'FormAdd.html?pdid='+pdid" target="_blank">
                                <i class="iconfont icon-look tip" data-toggle="tooltip" title="预览" data-placement="bottom"></i> 预览
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </nav>
        <div class="work">
            <div class="fwlayout" style="padding-top: 0px; width: 94%;">
                <!-- 左边导航 -->
                <div class="leftlayout box-shadow" id="leftlayout" style="min-height:670PX; display: block;width: 260px;position: fixed;top: 80px;">
                    <div class="left-head" style="padding:15px 20px;    background-color: #f5f5f5;">
                        组件选择
                    </div>
                    <div class="nav-list tools" style="padding:10px 0;">
                        <p style="padding-left: 10px;" class="text-info"><i class="caret active"></i>基础组件</p>
                        <el-row style="padding:5PX">
                            <el-col :span="12" v-for="wig in wigdata" v-if="wig.wigtype=='基础组件'">
                                <el-card shadow="hover" @click.native="addwigdet(wig)">
                                    <i class="iconfont" v-bind:class="wig.ico"></i>   <span v-text="wig.wigname"></span>
                                </el-card>
                            </el-col>
                        </el-row>
                        <p style="padding-left: 10px;" class="text-info"><i class="caret active"></i>高级组件</p>
                        <el-row style="padding:5PX">
                            <el-col :span="12" v-for="wig in wigdata" v-if="wig.wigtype=='高级组件'">
                                <el-card shadow="hover" @click.native="addwigdet(wig)">
                                    <i class="iconfont" v-bind:class="wig.ico"></i>   <span v-text="wig.wigname"></span>
                                </el-card>
                            </el-col>
                        </el-row>
                        <p style="padding-left: 10px;" class="text-info"><i class="caret active"></i>辅助组件</p>
                        <el-row style="padding:5PX">
                            <el-col :span="12" v-for="wig in wigdata" v-if="wig.wigtype=='辅助组件'">
                                <el-card shadow="hover" @click.native="addwigdet(wig)">
                                    <i class="iconfont icon-biaodanzujian-shurukuang"></i>   <span v-text="wig.wigname"></span>
                                </el-card>
                            </el-col>

                        </el-row>
                        <!--<p style="padding-left: 10px;" class="text-info"><i class="caret active"></i>教务组件</p>
                        <el-row style="padding:5PX">
                            <el-col :span="12" v-for="wig in wigdata" v-if="wig.wigtype=='教务组件'">
                                <el-card shadow="hover" @click.native="addwigdet(wig)">
                                    <i class="iconfont icon-biaodanzujian-shurukuang"></i>   <span v-text="wig.wigname"></span>
                                </el-card>
                            </el-col>

                        </el-row>-->
                        <p style="padding-left: 10px;" class="text-info"><i class="caret active"></i>自定义组件</p>
                        <el-row style="padding:5PX">
                            <el-col :span="12" v-for="wig in formop.zdydata">
                                <el-card shadow="hover" @click.native="addwigdet(wig)">
                                    <i class="iconfont icon-biaodanzujian-shurukuang"></i>   <span v-text="wig.wigname"></span>
                                </el-card>
                            </el-col>

                        </el-row>

                    </div>

                </div>
                <div class="rightlayout" style="margin-left: 260px;">
                    <div class="index-center">
                        <div class="menu-general ft14   box-shadow">
                            <ul>
                                <li @click="tab1 = 0" v-bind:class="{ active: tab1 =='0' }"><a> 表单设计</a>
                                <li @click="tab1 = 1" v-bind:class="{ active: tab1 =='1' }"><a> 表单属性</a>
                                <li @click="sellc" v-bind:class="{ active: tab1 =='2' }"><a> 表单流程设置</a>
                                <li @click="tab1 = 3" v-bind:class="{ active: tab1 =='3' }"><a> 表单Json数据</a>
                                <li @click="tab1 = 4" v-bind:class="{ active: tab1 =='4' }"><a> 表单事件</a>
                            </ul>
                        </div>
                        <div class="main-content    padding10 c666 box-shadow clearfix">
                            <div v-show="tab1=='0'">
                                <el-row>
                                    <el-form ref="FormData" label-position="top" :model="FormData">
                                        <component class="widget" v-for="(item, index) in FormData.wigetitems" v-dragging="{ list: FormData.wigetitems, item: item, group: 'color2' }" :key="item.wigdetcode" v-on:click.native="selwidget(item)" :index="index" :is="item.component" :id="item.wigdetcode" :pzoption="item" style="margin-top:10px" @data-change="datachange"></component>
                                    </el-form>
                                </el-row>
                            </div>
                            <div v-show="tab1=='1'" class="bbsx">
                                <el-form label-position="top" label-width="80px" style="padding: 0 30px;">
                                    <el-form-item label="报表默认宽度" style="display:none">
                                        <el-radio-group v-model="formop.width">
                                            <el-radio label="0">固定宽度(850px)</el-radio>
                                            <el-radio label="1">自动宽度(发起页面会根据屏幕大小自动调整)</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="封面(点击更改表单封面)" style="max-height: 150px;display:none">
                                        <i class="iconfont icon-shanchu" title="恢复默认图片" @click="fmdata = ''" style="font-size: 20px;position: absolute;left: 110px;color: red;"></i>

                                        <el-upload class="avatar-uploader"
                                                   :action="fileaction"
                                                   :show-file-list="false"
                                                   :on-success="handleAvatarSuccess"
                                                   accept=".jpg,.png"
                                                   :before-upload="beforeAvatarUpload">
                                            <img :src="fmdata" class="avatar" style="width:100px;height:100px" onerror="javascript: this.src = '/ViewV5/images/qywd/tz1.png'">
                                        </el-upload>
                                    </el-form-item>
                                    <el-form-item label="批量为intProcessStanceid为0得数据生成流程ID" style="margin-top:15PX;display:none">
                                        <el-button type="primary" icon="el-icon-check" size="mini" @click="genpidata()" style="width:135px"></el-button>
                                    </el-form-item>



                                    <el-form-item label="发起页面地址">
                                        <el-input v-model="formop.addurl" disabled></el-input>

                                    </el-form-item>
                                    <el-form-item label="处理页面地址">
                                        <el-input v-model="formop.mangeurl" disabled></el-input>
                                    </el-form-item>
                                    <el-form-item label="列表页面地址">
                                        <el-input v-model="formop.listurl" disabled></el-input>
                                    </el-form-item>
                                    <!--<el-form-item label="关联表">
                                        <el-input placeholder="请输入内容" v-model="pddata.RelatedTable" readonly class="input-with-select" style="width:45%">
                                            <el-tooltip content="获取表字段" placement="top" slot="append">
                                                <el-button icon="el-icon-search" @click="getfiled"></el-button>
                                            </el-tooltip>
                                        </el-input>
                                        <el-select v-model="formop.uniquefild" placeholder="请选择"  style="width:45%" multiple clearable>
                                            <el-option v-for="item in glfileddata"
                                                       :key="item.ColumnName"
                                                       :label="item.Name"
                                                       :value="item.ColumnName">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="判别唯一性字段">
                                     
                                    </el-form-item>-->
                                </el-form>
                                <div style="padding:0 30px">


                                    <el-table :data="formop.zdydata" style="width:100%;min-height:300px;margin-top:10px" class="data-table" stripe border>


                                        <el-table-column fixed="right"
                                                         label="操作"
                                                         width="80">
                                            <template slot-scope="scope">
                                                <el-button @click="delzj(scope.$index, formop.zdydata)" type="danger" size="mini">删除</el-button>

                                            </template>
                                        </el-table-column>


                                        <el-table-column fixed="right" label="组件名称" width="120">
                                            <template slot-scope="scope">
                                                <div>
                                                    <el-input v-model="scope.row.wigname" placeholder="请输入组件名称"></el-input>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column fixed="right" label="组件文件路径">
                                            <template slot-scope="scope">
                                                <div>
                                                    <el-input v-model="scope.row.wigurl" placeholder="输入组件路径"></el-input>
                                                </div>
                                            </template>
                                        </el-table-column>

                                    </el-table>
                                    <el-button @click="addzj()" type="success" size="mini" style="margin-top:10PX">添加自定义组件</el-button>
                                </div>
                            </div>
                            <div v-show="tab1=='2'">
                                <iframe marginwidth="0" :src="'/ViewV5/AppPage/FORMBI/LCSZSET.html?PDID='+pdid" class="tabiframe" marginheight="0" frameborder="0" scrolling="yes" height="600px" id="lcsz" name="main" width="100%" style="min-height: 600px"></iframe>

                            </div>
                            <div v-show="tab1=='4'">
                                <el-tabs type="border-card">
                                    <el-tab-pane label="表单新增前执行">
                                        <p class="mb10">自定义事件说明:返回false,阻止发起表单</p>
                                        <el-input type="textarea"
                                                  :rows="20"
                                                  placeholder="表单新增前执行"
                                                  v-model="formop.addcode">
                                        </el-input>
                                    </el-tab-pane>
                                    <el-tab-pane label="表单新增后执行">
                                        <p class="mb10">自定义事件说明:只在表单新增后执行,参数为"piid"(流程号)</p>
                                        <el-input type="textarea"
                                                  :rows="20"
                                                  placeholder="表单新增后执行"
                                                  v-model="formop.addendcode">
                                        </el-input>
                                    </el-tab-pane>
                                    <el-tab-pane label="流程处理执行">
                                        <p class="mb10">自定义事件说明:参数为任务节点taskorder(不为空时点击审核按钮执行自定义事件)</p>
                                        <el-input type="textarea"
                                                  :rows="20"
                                                  placeholder="流程处理执行"
                                                  v-model="formop.mangecode">
                                        </el-input>
                                    </el-tab-pane>
                                    <el-tab-pane label="流程结束执行">
                                        <p class="mb10">自定义事件说明:流程结束时执行,参数为"piid"(流程号)</p>
                                        <el-input type="textarea"
                                                  :rows="20"
                                                  placeholder="流程结束执行(新增数据完成，更新数据，流程审批完成都会执行)"
                                                  v-model="formop.completecode">
                                        </el-input>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                            <div v-show="tab1=='3'">
                                <el-button type="primary" @click="saveybjsondata()" style="margin-bottom:15PX">保存Json</el-button>

                                <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 30}" placeholder="请输入内容" v-model="pddata.Tempcontent">
                                </el-input>
                            </div>

                        </div>
                        <div class="index-right box-shadow bgfff" style="min-height: 670px;position: fixed;top: 80px;right:50PX">
                            <div class="panel panel-default " style="margin-bottom:0px">

                                <div class="panel-heading padding15">组件属性-<span v-text="widgetname[nowwidget.component]"></span><span v-text="nowwidget.wigdetcode"></span></div>

                                <div class="tab-box" v-show="nowwidget.wigdetcode">
                                    <ul>
                                        <li v-on:click="seltab(0)" style="width:50%" v-bind:class="{active:tabtype=='0'}">
                                            <a>基本属性</a>
                                        </li>
                                        <li v-on:click="seltab(1)" style="width:50%" v-bind:class="{active:tabtype=='1'}" v-if="nowwidget.wigdetype=='dwig'">
                                            <a style="border-right-width: 0px;">数据</a>
                                        </li>


                                    </ul>
                                </div>
                                <div style="min-height:600px" v-show="nowwidget.wigdetcode">
                                    <div class="detail-con" v-show="tabtype=='0'">
                                        <el-form label-position="top">
                                            <el-form-item label="组件标题">
                                                <el-input v-model="nowwidget.title" autocomplete="off"></el-input>
                                            </el-form-item>
                                            <el-form-item label="组件宽度">
                                                <el-select v-model="nowwidget.mdwidth" placeholder="请选择">
                                                    <el-option v-for="item in wigetwidth"
                                                               :key="item.value"
                                                               :label="item.label"
                                                               :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                            <div v-if="pddata.RelatedTable&&nowwidget.wigdetype!='fzwig'">
                                                <el-form-item label="关联表">
                                                    <el-input placeholder="请输入内容" v-model="pddata.RelatedTable" readonly class="input-with-select">
                                                        <el-tooltip content="获取可关联字段" placement="top" slot="append">

                                                            <el-button icon="el-icon-search" @click="getfiled"></el-button>
                                                        </el-tooltip>
                                                    </el-input>
                                                </el-form-item>
                                                <el-form-item label="关联字段">
                                                    <el-select v-model="nowwidget.glfiled" placeholder="请选择" clearable>
                                                        <el-option v-for="item in glfileddata"
                                                                   :key="item.DbColumnName"
                                                                   :label="item.DbColumnName+'-'+item.ColumnDescription"
                                                                   :value="item.DbColumnName">
                                                        </el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item label="选中值关联字段" v-if="nowwidget.hasvaltext">
                                                    <el-select v-model="nowwidget.glfiled1" placeholder="请选择" clearable>
                                                        <el-option v-for="item in glfileddata"
                                                                   :key="item.DbColumnName"
                                                                   :label="item.DbColumnName+'-'+item.ColumnDescription"
                                                                   :value="item.DbColumnName">
                                                        </el-option>
                                                    </el-select>
                                                </el-form-item>

                                            </div>
                                        </el-form>
                                    </div>
                                    <div class="detail-con" style="margin:0px;max-height: 550px;overflow: auto;" v-show="tabtype=='1'">
                                        <div>
                                            <div style="padding: 10px 5px; padding-bottom: 0px;" class="panwdjd">
                                                <b style="color: #12b8f6;">
                                                    <i class="caret active"></i>
                                                    <span class="jg-name" style="margin-left:0;">数据解析</span>
                                                </b>

                                            </div>
                                            <div class="panhid">
                                                <el-card style="border: 0px;padding:5px" :body-style="{ padding: '10px' }" shadow="never">
                                                    <div class="input-group input-group-sm">
                                                        <span class="input-group-addon" style="height:24px;    background-color: #e7ecf1;color: black;">数据源</span>
                                                        <el-select v-model="nowwidget.datatype" placeholder="请选择" size="mini" v-on:change="datasourcechange">
                                                            <el-option label="动态数据源" :value="0">
                                                            </el-option>
                                                            <el-option label="静态数据" :value="2">
                                                            </el-option>
                                                            <el-option label="API" :value="1">
                                                            </el-option>
                                                            <el-option label="执行存储过程" :value="3">
                                                            </el-option>
                                                        </el-select>
                                                    </div>
                                                    <div class="input-group input-group-sm mt10" v-show="nowwidget.datatype=='0'">
                                                        <span class="input-group-addon" style="height:24px;    background-color: #e7ecf1;color: black;">数据集</span>
                                                        <el-select v-model="nowwidget.datasetname" placeholder="请选择" size="mini" filterable v-on:change="datasetchange" style=" display: inherit;height:26px">
                                                            <el-option v-for="item in dataset"
                                                                       :key="item.DValue"
                                                                       :label="item.DName"
                                                                       :value="item.DValue">
                                                                <span style="float: left">{{ item.DName }}</span>
                                                                <span style="float: right;  font-size: 13px" class="text-info">{{ item.dtype }}</span>
                                                            </el-option>
                                                        </el-select>
                                                    </div>
                                                </el-card>

                                                <div v-show="nowwidget.datatype=='1'">
                                                    <div class="panel-body" style="padding-top:5px">
                                                        <el-input style="font-size:12px" size="mini" placeholder="请输入API地址" v-model="nowwidget.apiurl">
                                                        </el-input>
                                                        <table class="mt10">
                                                            <tr v-for="(item,index) in nowwidget.proqdata">
                                                                <td style="width: 80px;">
                                                                    <el-input placeholder="请输入参数名称" v-model="item.pname" size="mini" />
                                                                </td>
                                                                <td>
                                                                    <el-input placeholder="请输入参数值" v-model="item.pvalue" size="mini" />

                                                                </td>
                                                                <td>
                                                                    <el-button @click.native.prevent="delPR(index,nowwidget.proqdata)" type="text" size="small" style="margin-left:3px">
                                                                        删除
                                                                    </el-button>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                        <el-button type="text" size="mini" @click="addPR(nowwidget)"><i class="el-icon-plus">添加参数</i></el-button>

                                                    </div>
                                                </div>
                                                <div v-show="nowwidget.datatype=='2'">
                                                    <div class="panel-body" style="padding-top:5px">
                                                        <el-input type="textarea"
                                                                  :rows="4"
                                                                  style="font-size:12px"
                                                                  placeholder="静态JSON数据"
                                                                  v-model="nowwidget.staticdata">
                                                        </el-input>
                                                    </div>
                                                </div>
                                                <div v-show="nowwidget.datatype=='3'">
                                                    <div class="panel-body" style="padding-top:0px;padding-bottom:5px">
                                                        <el-input style="font-size:12px" size="mini" placeholder="存储过程名称" v-model="nowwidget.proname">
                                                        </el-input>
                                                        <table class="mt10">
                                                            <tr v-for="(item,index) in nowwidget.proqdata">
                                                                <td style="width: 80px;">
                                                                    <el-input placeholder="请输入参数名称" v-model="item.pname" size="mini" />
                                                                </td>
                                                                <td>
                                                                    <el-input placeholder="请输入参数值" v-model="item.pvalue" size="mini" />

                                                                </td>
                                                                <td>
                                                                    <el-button @click.native.prevent="delPR(index,nowwidget.proqdata)" type="text" size="small" style="margin-left:3px">
                                                                        删除
                                                                    </el-button>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                        <el-button type="text" size="mini" @click="addPR(nowwidget)"><i class="el-icon-plus">添加参数</i></el-button>
                                                    </div>
                                                </div>
                                                <div style="padding-left:15px">
                                                    <el-button-group>
                                                        <el-tooltip class="item" effect="dark" content="获取组件数据" placement="top-start">
                                                            <el-button type="primary" icon="el-icon-check" size="mini" @click="UpdateYBData(nowwidget)" style="width:135px"></el-button>
                                                        </el-tooltip>
                                                        <el-tooltip class="item" effect="dark" content="清理组件数据" placement="top-start">
                                                            <el-button type="primary" icon="el-icon-delete" size="mini" @click="ClearYBData(nowwidget)" style="width:135px"></el-button>
                                                        </el-tooltip>
                                                    </el-button-group>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="border-right-width: 0px;border-left-width: 0px; margin-top:5px">
                                            <div style="padding: 0px 5px 0px;" class="panwdjd">
                                                <b style="color: #12b8f6;">
                                                    <i class="caret active"></i>
                                                    <span class="jg-name" style="margin-left:0;">绑定字段[{{nowwidget.wdlist?nowwidget.wdlist.length:'0'}}]</span>
                                                </b>

                                            </div>

                                            <div class="panel-body wdcontent panhid" style="padding: 5px; padding-top: 0px;">

                                                <ul class="jg-list-box">
                                                    <li v-for="(item,wdindex) in nowwidget.wdlist">
                                                        <div class="jg-item jg-itemwd">
                                                            <b>
                                                                <i class="caret"></i>
                                                                <span class="jg-name">{{item.colname}}</span>
                                                                <i class="iconfont icon-shanchu pull-right" title="删除" data-placement="bottom" v-on:click="delwd(item)"></i>

                                                                <i class="iconfont el-icon-setting pull-right" style="margin-right: 5px; line-height: 40px;" title="设置" data-placement="bottom" @click="setfiled(item)"></i>
                                                                <i class="el-icon-aim" title="过滤" v-if="item.querydata.length>0" @click="setfiled(item)"></i>

                                                            </b>

                                                        </div>

                                                    </li>
                                                </ul>

                                                <el-popover placement="right"
                                                            width="250"
                                                            trigger="click">
                                                    <p class="text-info ft12 mb5">点击字段,添加到绑定数据</p>
                                                    <el-row style="padding:5PX;" class="filed">
                                                        <el-col :span="24" v-for="item in nowwidget.tabfiledlist" :key="item.ColumnName" style="margin-top:5PX">
                                                            <el-card shadow="hover" @click.native="addwd(item.ColumnName,nowwidget)">
                                                                <span style="font-size:12PX" v-text="item.Name"></span>
                                                                <span style="font-size:12PX;float:right" v-text="item.ColumnType"></span>

                                                            </el-card>
                                                        </el-col>
                                                    </el-row>
                                                    <el-button slot="reference" type="text" size="mini" style="margin-left:15px;color:#0e08ff"><i class="el-icon-plus"></i>添加字段</el-button>
                                                </el-popover>

                                            </div>

                                        </div>
                                    </div>


                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
        <el-drawer title="数据过滤" :visible.sync="FiledSetVisible" direction="rtl" style="opacity:.95;" size="50%">

            <el-tabs tab-position="left" style="min-height: 300px;" v-model="tabname">
                <el-tab-pane v-for="(el,cindex) in nowwidget.wdlist" :label="el.colname" :name="el.colid" v-bind:key="el.colid">
                    <table class="table table-bordered table-striped table-hover table-condensed">
                        <tr>
                            <td style="text-align:right;width:120px">列ID</td>
                            <td v-text="el.colid"></td>
                        </tr>
                        <tr>
                            <td style="text-align:right;">数据类型</td>
                            <td v-text="el.coltype"></td>
                        </tr>
                        <tr>
                            <td style="text-align:right">数据过滤</td>
                            <td>
                                <table>
                                    <tr v-for="(item,index) in el.querydata">
                                        <td>
                                            <el-select v-model="item.cal" placeholder="请选择" size="mini" style="width: 100px;">
                                                <el-option label="等于" value="0"></el-option>
                                                <el-option v-show="el.coltype=='Num'" label="小于" value="1"></el-option>
                                                <el-option v-show="el.coltype=='Num'" label="大于" value="2"></el-option>
                                                <el-option label="不等于" value="3"></el-option>
                                                <el-option label="包含" value="4"></el-option>
                                                <el-option v-show="el.coltype=='Date'" label="起止" value="5"></el-option>
                                                <el-option label="在列表中(逗号隔开)" value="6"></el-option>


                                            </el-select>
                                        </td>
                                        <td>
                                            <el-input placeholder="" v-model="item.glval" size="mini" />

                                        </td>
                                        <td>
                                            <el-button @click.native.prevent="delgl(index,el.querydata)" type="text" size="small">
                                                删除
                                            </el-button>
                                        </td>
                                    </tr>
                                </table>

                                <el-button type="primary" size="mini" @click="addgl(el)"><i class="el-icon-plus"></i>添加过滤条件</el-button>
                            </td>
                        </tr>



                    </table>
                </el-tab-pane>


            </el-tabs>
        </el-drawer>
    </div>
    <script src="/ViewV5/JS/vue.js"></script>
    <script type="text/javascript" src="/ViewV5/JS/jquery-1.11.2.min.js"></script>
    <script src="/ViewV5/JS/lodash.min.js"></script>
    <script src="/ViewV5/JS/httpVueLoader.js"></script>
    <script src="/ViewV5/CSS/bootstrap3.3.5/js/bootstrap.js"></script>
    <script src="/ViewV5/JS/layer/layer.js"></script>

    <!-- 引入组件库 -->
    <script src="/ViewV5/JS/element/element.js?v=2.13"></script>
    <script src="/ViewV5/JS/bijs.js?v=14"></script>
    <script src="/ViewV5/JS/vue-dragging.js?v=4"></script>
    <script type="text/javascript" charset="utf-8" src="/ToolS/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ToolS/ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ViewV5/JS/vuetree/vuetree.js"></script>
    <link rel="stylesheet" href="/ViewV5/JS/vuetree/vue-tree.css">
    <script src="data-set.min.js"></script>

    <script>
        Vue.use(VueDragging)
        var app = new Vue({
            el: '#DATABI_YBZZ',
            components:
            {

            },
            data: {
                loading: true,
                pdid: ComFunJS.getQueryString('ID'),
                pagemodel:"0",//设计页面
                fmdata: "",
                tab1: "0",//页面
                wigdata: [],
                dataset: [],
                widgetname: { "qjInput": "输入框", "qjSelect": "单选", "qjMSelect": "多选", "qjDate": "日期时间组件", "qjSeluser": "人员选择", "qjSelbranch": "部门选择", "qjInputNum": "数字输入", "qjFile": "上传组件" },
                FormName: "",
                tabtype: "0",//属性
                isview: false,//是否浏览模式,判断需不需要加载默认值
                pddata: {},
                glfileddata: [],
                fileaction: "/api/File/UPPIC",
                formop: {
                    width: "0",
                    uniquefild:[],
                    addurl: "/ViewV5/AppPage/FORMBI/FormAdd.html?pdid=" + ComFunJS.getQueryString('ID'),
                    mangeurl: "/ViewV5/AppPage/FORMBI/FormManage.html?piid=?",
                    listurl: "/ViewV5/AppPage/FORMBI/FormList.html?pdid=" + ComFunJS.getQueryString('ID'),
                    zdydata: []
                },
                FiledSetVisible: false,
                wigetwidth: [{ label: "1/4", value: 6 }, { label: "2/4", value: 12 }, { label: "3/4", value: 18 }, { label: "1/3", value: 8 }, { label: "2/3", value: 16 }, { label: "整行", value: 24 }],
                FormData: {
                    wigetitems: []
                },
                nowwidget: {

                },
                glformdata: [],
                tabname: ""

            },
            created: function () {
                document.body.removeChild(document.getElementById('Loading'))
                var divBJ = document.getElementById('DATABI_YBZZ');
                divBJ.style.display = "block";
            },
            methods: {
                addzj: function () {
                    if (typeof (this.formop.zdydata) == "undefined") {
                        this.formop.zdydata = [];
                    }
                    this.formop.zdydata.push({ wigname: "组件名称" + Math.floor(Math.random() * (9)) + 1, wigurl: "", wigcode: "qj_" + Math.floor(Math.random() * (99)) + 1, wigtype: "自定义组件", ico: "icon-biaodanzujian-xialakuanglv" });
                },
                delzj: function (index, rows) {
                    rows.splice(index, 1);
                },
                genpidata: function () {
                    $.getJSON("/api/Bll/ExeAction?Action=FORMBI_GENWF", { P1: app.pdid }, function (result) {
                        if (result.ErrorMsg == "") {
                            app.$notify({
                                title: '成功',
                                message: '操作成功',
                                type: 'success'
                            });
                        }
                    })
                },
                seltab: function (tabtype) {
                    this.tabtype = tabtype;
                },
                sellc: function () {
                    this.tab1 = 2;
                    $("#lcsz").attr("src", '/ViewV5/AppPage/FORMBI/LCSZSET.html?PDID=' + this.pdid);
                },
                genID: function () {
                    var random = Math.floor(Math.random() * (90000 - 10000 + 1) + 10000);
                    return random;
                },
                addPR: function (wigget) {
                    wigget.proqdata.push({ pname: "pname", pvalue: "" });
                },
                delPR: function (index, rows) {
                    rows.splice(index, 1);
                },
                selwidget: function (item) {
                    if (item.wigdetype == "dwig") {
                        app.tabtype = "1";
                    } else {
                        app.tabtype = "0";
                    }
                    app.nowwidget = item;
                    $(".widget").removeClass("widgetsel")
                    $("#" + item.wigdetcode).addClass("widgetsel")
                },
                jxparam: function (val) {
                    //解析参数
                    var valsql = "";
                    if (val) {
                        valsql = val;
                        var regex2 = /\[(.+?)\]/g;
                        var temp = val.match(regex2);
                        _.forEach(temp, function (obj) {
                            var tempqval = "";
                            obj = _.trim(obj, '[');
                            obj = _.trim(obj, ']');
                            if (_.startsWith(obj, '&')) {
                                tempqval = ComFunJS.getQueryString(obj.split('&')[1]);
                                valsql = _.replace(valsql, '[' + obj + ']', tempqval);
                            }
                            if (_.startsWith(obj, '@')) {
                                tempqval = ComFunJS.getCookie(obj.split('@')[1]);
                                valsql = _.replace(valsql, '[' + obj + ']', tempqval);
                            }
                            if (_.startsWith(obj, '$')) {
                                var wig = _.find(app.FormData.wigetitems, function (o) {
                                    return o.wigdetcode == obj.split('$')[1];
                                })
                                tempqval = wig.value;//获取组件值
                                valsql = _.replace(valsql, '[' + obj + ']', tempqval);
                            }
                        })
                    }
                    return valsql;
                },
                jxfiled: function (nowwidget, jxdata) {
                    var js = [];
                    if (_.isArray(jxdata)) {
                        js = jxdata || JSON.parse(nowwidget.staticdata);

                    } else {
                        js = JSON.parse(jxdata || nowwidget.staticdata);
                    }
                    nowwidget.tabfiledlist = [];
                    _.forEach(_.keys(js[0]), function (value) {
                        var fid = {
                            ColumnName: value,
                            ColumnType: "Str",
                            Dimension: "1",
                            Name: value,
                        }
                        if (_.findIndex(nowwidget.tabfiledlist, function (o) { return o.ColumnName == fid.ColumnName; }) == -1) {
                            nowwidget.tabfiledlist.push(fid);
                        }
                    });
                },//解析数据维度
                addwigdet: function (wig) {
                    var wigget = {
                        datasetname: "",
                        pwigdetcode: "",
                        wigdetype: wig.datatype,
                        component: wig.wigcode,
                        wigdetcode: wig.wigcode + this.genID(),
                        hasvaltext: wig.hasvaltext,
                        title: wig.wigname,
                        mdwidth: 12,
                        childpro: {},
                        glfiled: "",
                        glfiled1: "",
                        value: "",
                        valuetext: ""
                    }
                    if (wigget.wigdetype == 'dwig') {
                        wigget.datatype = 2;//数据源类型
                        wigget.apiurl = "";
                        wigget.proname = "";
                        wigget.dataset = [];//绑定数据
                        wigget.proqdata = [];//api参数
                        wigget.staticdata = "";
                        wigget.tabfiledlist = [];//可选绑定字段
                        wigget.wdlist = [];//已选绑定字段
                    }
                    this.FormData.wigetitems.push(wigget)

                },//新增组件
                handleAvatarSuccess(res, file) {
                    this.fmdata = res.Result[0];
                },
                beforeAvatarUpload(file) {
                    const isLt2M = file.size / 1024 / 1024 < 1;
                    if (!isLt2M) {
                        this.$message.error('上传图片大小不能超过 1MB!');
                    }
                    return isLt2M;
                },
                datasourcechange: function () {
                    app.nowwidget.wdlist = [];
                    app.nowwidget.tabfiledlist = [];
                },
                datasetchange: function (val) {
                    var app = this;
                    if (val) {
                        app.nowwidget.wdlist = [];
                        app.nowwidget.tabfiledlist = [];
                        var temps = _.find(app.dataset, function (o) { return o.DName == val || o.DValue == val; });
                        app.nowwidget.tabfiledlist = _.concat(app.nowwidget.tabfiledlist, temps.dl, temps.wd);
                        //setTimeout("app.initdrag()", 1000)
                    }

                },//更改数据集事件
                datachange: function (chidata, wigdetcode) {
                    //_.forEach(this.FormData.wigetitems, function (item) {
                    //    if (item.wigdetcode == wigdetcode) {
                    //        item.childpro = JSON.parse(chidata)
                    //    }
                    //})
                },
                addwd: function (ColumnName, widget) {
                    if (_.findIndex(widget.wdlist, function (o) { return o.colid == ColumnName }) == -1) {
                        var temp = _.find(widget.tabfiledlist, { 'ColumnName': ColumnName });
                        var wd = { "colid": temp.ColumnName, "colname": temp.Name, "coltype": temp.ColumnType, "width": "", "ishj": false, "caltype": "sum", "istip": true, "ishide": false, "isuser": "Y", "order": "", "bindwig": "", options: [], querydata: [], mapdata: [] };
                        widget.wdlist.push(wd)

                    } else {
                        app.$notify({
                            title: '警告',
                            message: '已存在该字段',
                            type: 'warning'
                        });
                    }
                },
                delwd: function (wditem) {
                    var index = _.findIndex(this.nowwidget.wdlist, function (obj) {
                        return obj.colname == wditem.colname;
                    });
                    this.nowwidget.wdlist.splice(index, 1)
                },
                getfiled: function () {

                    $.getJSON("/api/Bll/ExeAction?Action=FORMBI_GETFIELDDATAFORM", { P1: app.pddata.RelatedTable }, function (result) {
                        if (!result.ErrorMsg) {
                            app.glfileddata = result.Result;
                        }

                    })
                },
                getwiget: function (wiggetcode) {
                    var datawig = null;
                    _.forEach(app.FormData.wigetitems, function (item) {
                        if (item.wigdetcode == wiggetcode) {
                            datawig = item;
                        }
                    })
                    return datawig;
                },
                saveybdata: function () {

                    _.forEach(this.FormData.wigetitems, function (obj) {
                        if (obj.wigdetype == "dwig") {
                            app.ClearYBData(obj);
                        }
                    })
                    var savedata = JSON.stringify(this.FormData.wigetitems).replace(/null/g, '""');
                    
                    $.getJSON("/api/Bll/ExeAction?Action=FORMBI_SETPDTEMP", { P1: app.pdid, P2: savedata, fmdata: app.fmdata, formop: JSON.stringify(app.formop) }, function (result) {
                        if (!result.ErrorMsg) {
                            app.$notify({
                                title: '成功',
                                message: '操作成功',
                                type: 'success'
                            });
                            app.pddata.Tempcontent = savedata;
                        }
                    })

                },
                saveybjsondata: function () {
                    this.$confirm('确定要更新表单的JSon数据,是否继续?', '提示', {
                        confirmButtonText: '确定保存',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true
                    }).then(() => {
                        $.getJSON("/api/Bll/ExeAction?Action=FORMBI_SAVEJSONDATA", { P1: app.pdid, P2: app.pddata.Tempcontent, }, function (result) {
                            if (!result.ErrorMsg) {
                                app.$notify({
                                    title: '成功',
                                    message: '操作成功',
                                    type: 'success'
                                });
                                location.reload();
                            }
                        })

                    }).catch(() => {
                        app.$message({
                            type: 'info',
                            message: '已取消操作'
                        });
                    });



                },
                ClearYBData: function (nowwidget) {
                    nowwidget.value = "";
                    nowwidget.dataset = [];
                    if (nowwidget.wigdetype == "dwig") {
                        nowwidget.tabfiledlist = [];
                        nowwidget.valuetext = "";
                        nowwidget.childpro.svalue = "";
                        nowwidget.childpro.mvalue = [];
                    }

                },
                UpdateYBData: function (nowwidget) {
                    if (nowwidget.datatype == '2') {//静态数据
                        try {
                            app.jxfiled(nowwidget, nowwidget.staticdata)
                            var js = JSON.parse(nowwidget.staticdata);
                            var lastdata = js;
                            nowwidget.dataset = lastdata;
                        } catch (e) {
                            app.$notify({
                                title: '失败',
                                message: '错误得JSON格式',
                                type: 'error'
                            });
                        }
                        return;
                    }

                    //需要先克隆一个对象,不然没法解析参数
                    var tempnow = _.cloneDeep(nowwidget);
                    if (tempnow.apiurl.indexOf("http:") == -1) {
                        tempnow.apiurl = window.document.location.origin + '/' + tempnow.apiurl;
                    }
                    if (tempnow.datatype == '3' || tempnow.datatype == '1') {
                        //处理存储过程和API得参数
                        _.forEach(tempnow.proqdata, function (obj) {
                            obj.pvalue = app.jxparam(obj.pvalue);
                        })

                    } else {
                        //处理查询参数
                        _.forEach(tempnow.wdlist, function (wd) {
                            if (wd.querydata.length > 0) {
                                _.forEach(wd.querydata, function (wdq) {
                                    wdq.glval = app.jxparam(wdq.glval);

                                })
                            }
                        })
                        //处理查询参数
                    }

                    $.getJSON('/api/Bll/ExeAction?Action=FORMBI_GETYBDATA', { P1: JSON.stringify(tempnow), pagecount: 0, pageNo: 0, pageSize: 0 }, function (resultData) {
                        if (!resultData.ErrorMsg) {
                            nowwidget.dataset = [];
                            if (nowwidget.datatype == "0") {
                                nowwidget.datatotal = resultData.DataLength;
                                nowwidget.dataset = resultData.Result;
                                //重新解析可用字段

                                var temps= _.find(app.dataset, function (item) {
                                    return item.DValue == nowwidget.datasetname;
                                });
                                app.nowwidget.tabfiledlist = [];
                                app.nowwidget.tabfiledlist = _.concat(app.nowwidget.tabfiledlist, temps.dl, temps.wd);

                            } else {
                                if (resultData.Result) {
                                    try {
                                        if (nowwidget.datatype == "1" && nowwidget.apiurl.indexOf("http:") == -1) {
                                            resultData.Result = JSON.parse(resultData.Result).Result;//本地服务处理API
                                        }
                                        app.jxfiled(nowwidget, resultData.Result)
                                        var tempdata = [];
                                        if (_.isArray(resultData.Result)) {
                                            tempdata = resultData.Result;

                                        } else {
                                            tempdata = JSON.parse(resultData.Result);
                                        }
                                        var lastdata = app.datamange(tempdata, nowwidget);
                                        nowwidget.dataset = lastdata;
                                    } catch (e) {
                                        app.$notify({
                                            title: '失败',
                                            message: '获取数据格式错误',
                                            type: 'error'
                                        });
                                    }
                                }
                            }

                        }
                    })
                },
                inityb: function () {
                    $.getJSON('/api/Bll/ExeAction?Action=DATABI_GETYBDATASET', {}, function (resultData) {
                        if (resultData.Result.length > 0) {
                            app.dataset = resultData.Result;

                        }
                    })
                    $.getJSON("/api/Bll/ExeAction?Action=FORMBI_GETPROCESSBYID", { P1: app.pdid }, function (result) {
                        if (!result.ErrorMsg) {
                            if (result.Result.Tempcontent) {
                                app.FormData.wigetitems = JSON.parse(result.Result.Tempcontent);
                            }
                            if (result.Result.Poption) {
                                app.formop = JSON.parse(result.Result.Poption);
                                if (!_.isUndefined(app.formop.zdydata)) {
                                    for (var i = 0; i < app.formop.zdydata.length; i++) {
                                        pro.$options.components[app.formop.zdydata[i].wigcode] = httpVueLoader(app.formop.zdydata[i].wigurl);
                                    }
                                }
                              
                            }

                            app.FormName = result.Result.ProcessName;
                            app.fmdata = result.Result.fmdata;
                            app.pddata = result.Result;
                            app.$notify({
                                title: '成功',
                                message: '初始化成功',
                                type: 'success'
                            });
                            app.loading = false;
                        }

                    })
                },
                initcomponents: function () {
                    var pro = this;
                    pro.wigdata = ComFunJS.formcomponents;
                    for (var i = 0; i < pro.wigdata.length; i++) {
                        pro.$options.components[pro.wigdata[i].wigcode] = httpVueLoader(pro.wigdata[i].wigurl);
                    }
                },
                setfiled: function (item) {
                    this.tabname = item.colid;
                    this.FiledSetVisible = true
                },
                addgl: function (wigget) {
                    wigget.querydata.push({ cal: "0", glval: "" });
                },
                delgl: function (index, rows) {
                    rows.splice(index, 1);
                },
                datamange: function (data, nowwidget) {
                    const dv = new DataSet.View().source(data);
                    var redata = [];

                    //数据过滤
                    //获取数据筛选条件
                    var qdata = [];
                    _.forEach(nowwidget.wdlist, function (wd) {
                        if (wd.querydata.length > 0) {
                            _.forEach(wd.querydata, function (wdq) {
                                qdata.push({ colid: wd.colid, cal: wdq.cal, glval: wdq.glval });
                            })
                        }
                    })
                    _.forEach(qdata, function (q) {
                        var calval = app.jxparam(q.glval);
                        if (calval) {
                            switch (q.cal) {
                                case "0":    //等于
                                    {
                                        dv.transform({
                                            type: 'filter',
                                            callback(row) { // 判断某一行是否保留，默认返回true
                                                return row[q.colid] == calval;
                                            }
                                        });
                                    }
                                    break;
                                case "1":    //小于
                                    {
                                        dv.transform({
                                            type: 'filter',
                                            callback(row) { // 判断某一行是否保留，默认返回true
                                                return row[q.colid] < calval;
                                            }
                                        });
                                    }
                                    break;
                                case "2":    //大于
                                    {
                                        dv.transform({
                                            type: 'filter',
                                            callback(row) { // 判断某一行是否保留，默认返回true
                                                return row[q.colid] > calval;
                                            }
                                        });
                                    }
                                    break;
                                case "3":    //小于
                                    {
                                        dv.transform({
                                            type: 'filter',
                                            callback(row) { // 判断某一行是否保留，默认返回true
                                                return row[q.colid] != calval;
                                            }
                                        });
                                    }
                                    break;
                                case "4":    //包含
                                    {
                                        dv.transform({
                                            type: 'filter',
                                            callback(row) { // 判断某一行是否保留，默认返回true
                                                return row[q.colid].indexOf(calval) > -1;
                                            }
                                        });
                                    }
                                    break;
                                default: {

                                }
                            }
                        }
                    })
                    var filds = _.map(nowwidget.wdlist, 'colid');
                    if (filds.length > 0) {
                        dv.transform({
                            type: 'pick',
                            fields: filds // 决定保留哪些字段，如果不传，则返回所有字段
                        });
                    }

                    //排序
                    //if (nowwidget.dataorder.prop) {
                    //    dv.transform({
                    //        type: 'sort-by',
                    //        fields: [nowwidget.dataorder.prop], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
                    //        order: nowwidget.dataorder.order        // 默认为 ASC，DESC 则为逆序
                    //    })
                    //}
                    redata = dv.rows;
                    return redata;
                },
            },
            mounted: function () {
                var pro = this;
                pro.$nextTick(function () {
                    pro.initcomponents();//加载组件
                    pro.inityb();
                })

            }
        })


    </script>
</body>

</html>